<script>
import {handleSuccess, handleError} from "@/util/request";
import th from "element-ui/src/locale/lang/th";
export default {
  name: "MaterialDetailPage",
  data() {
    return {
      // 用于存储一条完整的物资数据 (需要请求后端查询后返回)
      item:{},
      total:0,
      // 查询到的总页数 (后端根据total和size算出来一个值)
      pages: 0,
      // 查询参数: 操作人名称
      operator: null,
      // 查询参数: 操作类型
      type: null,
      // 查询参数: 日期区间
      date: [],
      // 分页参数: 当前页码
      current: 1,
      // 分页参数: 显示的行数
      size: 10,
      sizes:[5, 10, 20, 50, 100],
      // 用于存储物资出入库记录的表格数据 (需要请求后端查询后返回)
      tableData:[]
    }
  },
  methods:{
    // 根据当前物资id查询一条物资完整信息
    getDetailData() {
      this.$http.get('/material/detail', {params: this.item})
          .then((result) => {
            this.item = handleSuccess(result)
          }).catch((error) =>{
        handleError(error)
      })
    },
    getPageData () {
      let page = {
        current: this.current,
        size: this.size,
      }
      if (this.operator != null) {
        page.operator = this.operator
      }
      if (this.type != null) {
        page.type = this.type
      }
      if (this.date != null && this.date.length > 0) {
        page.startDate = this.date[0]
        page.endDate = this.date[1]
      }
      this.$http.get('/material/inventory-page', {params:page})
          .then((result)=> {
            const page = handleSuccess(result)
            if (page) {
              this.tableData = page.records
              this.total = page.total
              this.pages = page.pages
            }
          })
          .catch((error)=> {
            handleError(error)
          })
    },
    handleSearch() {
      this.current=1
      this.size=10
      this.getPageData()
    },
    handleSizeChange(size) {
      this.size = size
      this.getPageData()
    },
    handleCurrentChange(current) {
      this.current = current
      this.getPageData()
    },
    reset(){
      this.operator = null
      this.type = null
      this.date = []
      this.current = 1
      this.size = 10
      this.getPageData()
    },

    // 更新物资信息请求
    update(id, prop, value) {
      this.$http.post('/material/update')
    }
  },
  created() {
    this.item.id = this.$route.query.id
    if (!this.item.id) {
      // 防止用户直接进入此页面
      this.$router.push('/material/page')
    }else {
      this.getDetailData()
      this.getPageData()
    }
  }
}
</script>

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>物资基础信息</span>
      </div>
      <el-descriptions border :column="2">
        <el-descriptions-item label="物资名称">{{ item.materialName }}</el-descriptions-item>
        <el-descriptions-item label="库存数量">{{ item.stockAmount }}</el-descriptions-item>
        <el-descriptions-item label="库存预警">{{ item.warningStock }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="item.deleteStatus==0" type="success">启用中</el-tag>
          <el-tag v-if="item.deleteStatus==1" type="danger">已禁用</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="图片">
          <template>
            <div style="display: flex;align-items: center">
              <el-tag v-if="!item.materialImage" type="info">暂无图片</el-tag>
              <el-upload v-if="!item.materialImage" style="margin-left: 5px">
                <el-button type="primary" plain size="mini">上传</el-button>
              </el-upload>
            </div>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="使用手册">
          <template>
            <div style="display: flex;align-items: center">
              <el-tag v-if="!item.instructionManual" type="info">暂无使用手册</el-tag>
              <el-upload v-if="!item.instructionManual" style="margin-left: 5px">
                <el-button type="primary" plain size="mini">上传</el-button>
              </el-upload>
            </div>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="创建日期">{{ item.createTime }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ item.createBy }}</el-descriptions-item>
        <el-descriptions-item label="更新日期">{{ item.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="更新人">{{ item.updateBy }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>物资出入库记录</span>
      </div>
      <el-form class="el-form--inline" label-position="left">
        <el-form-item label="操作人">
          <el-input placeholder="(支持模糊查询)" v-model="operator"/>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="type">
            <el-option label="出库" value="0"/>
            <el-option label="入库" value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item label="操作日期">
          <el-date-picker v-model="date" value-format="yyyy-MM-dd"
                          type="daterange" range-separator="至"
                          start-placeholder="起始日期"
                          end-placeholder="结束日期"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="materialName" label="物资名称" width="180"/>
        <el-table-column prop="operator" label="操作人" width="180"/>
        <el-table-column label="操作类型" width="180" prop="type">
          <template v-slot="scope">
            <el-tag v-if="scope.row.type == 0" type="primary">出库</el-tag>
            <el-tag v-if="scope.row.type == 1" type="success">入库</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="180"/>
        <el-table-column prop="operateDate" label="操作日期" width="200"/>
        <el-table-column prop="remarks" label="备注"/>
      </el-table>
      <!-- 卡片底部: 这里分页器 -->
      <el-row class="card-footer" style="margin-top: 10px">
        <el-col>
          <el-pagination
              layout="sizes,prev,pager,next,jumper,total"
              :total="total"
              background
              :current-page="current"
              :page-size="size"
              :page-sizes="sizes"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
          </el-pagination>
        </el-col>
      </el-row>
      <el-empty v-if="!tableData || tableData.length == 0" description="暂无出入库记录"></el-empty>
    </el-card>
  </div>
</template>

<style scoped>

</style>